<template>
  <div class="homeContainer">
    <swiper height="57vw" :list="dataJson.advert_info" auto></swiper>
    <div class="modules">
      <ul class="clearfix" id="platform_goods_category">
        <li class="swiper-slide platFormMore" v-for="category in dataJson.platform_goods_category" :key="category.id">
          <a >
            <img :src="dataJson.domainName + category.pic" alt="">
            <p class="over">{{category.name}}</p>
          </a>
        </li>
        <li class="swiper-slide platFormMore"><a href=""><img :src="dataJson.platFormMore" alt=""><p class="over">更多</p></a></li>
      </ul>
    </div>
    <div class="goodBox"> 
      <div class="single_page" v-for="(single_page,index) in dataJson.single_page" :key="single_page.id" >
        <img v-if="index == 0" :src="dataJson.domainName + single_page.pic">      
      </div>
      <div class="clearfix pastTitle hot_tip">
        <div class="l imgWrap"><span class="hot_tip_text module-title">热门商品</span></div>
      </div>
      <Scroller :scrollbar-x=false lock-y >
        <div  class="good_box"  v-bind:style="{width: dataJson.hot_goods_width}">
          <div v-for="hot_goods_item in dataJson.hot_goods" :key="hot_goods_item.id" class="good_list">
              <div class="imgBox"><img :src="dataJson.domainName + hot_goods_item.pic" alt=""></div>
              <p class="productName over">{{hot_goods_item.shop_name}}</p>
              <p class="goodsPrice">¥ <span>{{hot_goods_item.sale_price}}</span></p>
          </div>
        </div>
      </Scroller>
      <div class="single_page" v-for="(single_page,index) in dataJson.single_page" :key="single_page.id" >
        <img v-if="index == 1" :src="dataJson.domainName + single_page.pic">      
      </div>
      <div class="clearfix pastTitle hot_tip">
        <div class="l imgWrap"><span class="hot_tip_text module-title">推荐商品</span></div>
      </div>
      <Scroller :scrollbar-x=false lock-y >
        <div  class="good_box"  v-bind:style="{width: dataJson.recommend_goods_width}">
          <div v-for="recommend_goods_item in dataJson.recommend_goods" :key="recommend_goods_item.id" class="good_list">
              <div class="imgBox"><img :src="dataJson.domainName + recommend_goods_item.pic" alt=""></div>
              <p class="productName over">{{recommend_goods_item.shop_name}}</p>
              <p class="goodsPrice">¥ <span>{{recommend_goods_item.sale_price}}</span></p>
          </div>
        </div>
      </Scroller>
    </div>
  </div>
</template>
<script>
  import commonJson from '../../../static/js/common';
  import {Swiper, SwiperItem,Scroller} from 'vux'
  
  export default {
    data() {
      return {
        dataJson: {
          hot_goods_width:'',
          recommend_goods_width:'',
          domainName:commonJson.commonData().domainImgName,
          advert_info:[],
          hot_goods:[],
          platform_goods_category:[],
          recommend_goods:[],
          single_page:[],
          platFormMore:'./static/img/home/index_more.png'
        }
      }      
    },
    mounted() {
      var that = this;
      that.axios.get(commonJson.commonData().domainName + '/api/WDS/goods/shopGoodsIndex', {
          params: {
            advert_site: 1
          }
        })
        .then(function (response) {
          console.log(response.data)
          if (response.data.code == 0) {
            that.dataJson.advert_info = that.processingFunction(response.data.data);
            that.dataJson.hot_goods = response.data.data.hot_goods;
            that.dataJson.platform_goods_category = response.data.data.platform_goods_category;
            that.dataJson.recommend_goods = response.data.data.recommend_goods;
            that.dataJson.single_page = response.data.data.single_page;
            that.dataJson.hot_goods_width = 100 * response.data.data.hot_goods.length + 'px';
            that.dataJson.recommend_goods_width = 100 * response.data.data.recommend_goods.length + 'px';
          } else {

          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    components: {
      Swiper,
      SwiperItem,
      Scroller
    },
    methods: {
      processingFunction: function (data) {
        var processObj = new Array();
        data.advert_info[0].picInfo.forEach(function (ele, i) {
          let object = {}
          processObj.push(Object.assign({}, object , { //数组中push对象
            img: commonJson.commonData().domainImgName + ele.pic,
            pic_value_parameter: ele.pic_value_parameter,
            pic_value_type: ele.pic_value_type,
            id: ele.id,
            title: '',
            fallbackImg: 'https://static.vux.li/demo/3.jpg'
          }))
        }, this);
        return processObj;
      }
    }
  }

</script>
<style scoped>
  .modules ul {
    width: 100%;
  }

  .modules ul li {
    float: left;
    width: 25%;
  }

  .modules ul li a {
    display: block;
    height: 100%;
    width: 100%;
    color: #666;
    text-align: center;
    font-size: 17px;
  }

  .modules ul li a img {
    width: 30%;
    margin: 16px auto 0 auto;
  }

  .modules ul li a p {
    font: 12px/30px "microsoft yahei";
  }
  .hot_tip {
      display: block;
      line-height: 40px;
      width: 100%;
      padding: 5px 0;
  }
  .hot_tip .hot_tip_text {
      font: 14px/30px "microsoft yahei";
      color: #000;
      margin-left: 10px;
      display: block;
  }
  .single_page img{
    width: 100%;
    display: block;
  }
  .module-title::before {
      display: inline-block;
      box-sizing: border-box;
      width: 10px;
      height: 16px;
      content: '';
      vertical-align: -.22ex;
      color: transparent;
      border-left: 2px solid #ed424b;
  }
  .good_box{
      width: 1000px;
  }
  .good_box .good_list{
      width: 100px;
      display: inline-block;
  }
  .good_box .good_list .imgBox{
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    height: 80px;
    overflow: hidden;
  }
  .good_box .good_list .imgBox img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }
  .good_box .good_list .productName {
      text-align: center;
      font: 14px/24px "microsoft yahei";
      color: #333333;
  }
  .good_box .good_list .goodsPrice {
      text-align: center;
      font: 14px/24px "microsoft yahei";
      color: #000;
  }
</style>
